<template>
  <div ref="chart1" :style="{ width: '100%', height: '535px' }"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, getCurrentInstance } from 'vue'
import { reqBarAPI } from '@/api/visual/index'

const chart1 = ref()
const { proxy } = getCurrentInstance() as any

let legend = ref([])
let x = ref([])
let y1 = ref([])
let y2 = ref([])
const init = async () => {
  let res = await reqBarAPI()
  console.log(res)
  legend.value = res.result.legend
  x.value = res.result.x
  y1.value = res.result.y1
  y2.value = res.result.y2
}
onMounted(() => {
  init().then(() => {
    // 获取挂载的组件实例
    const echarts = proxy.$ECharts
    //初始化挂载
    const echarts1 = echarts.init(chart1.value)
    //添加配置
    echarts1.setOption({
      backgroundColor: '#00265f',
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      legend: {
        data: legend.value,
        align: 'right',
        right: 500,
        textStyle: {
          color: '#fff',
        },
        itemWidth: 10,
        itemHeight: 10,
        itemGap: 35,
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          data: x.value,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#063374',
              width: 1,
              type: 'solid',
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#00c7ff',
            },
          },
        },
      ],
      yAxis: [
        {
          type: 'value',
          axisLabel: {
            formatter: '{value}',
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#00c7ff',
              width: 1,
              type: 'solid',
            },
          },
          splitLine: {
            lineStyle: {
              color: '#063374',
            },
          },
        },
      ],
      series: [
        {
          name: legend.value[0],
          type: 'bar',
          data: y1.value,
          barWidth: 10, //柱子宽度
          barGap: 1, //柱子之间间距
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#008cff',
                },
                {
                  offset: 1,
                  color: '#005193',
                },
              ]),
              opacity: 1,
            },
          },
        },
        {
          name: legend.value[1],
          type: 'bar',
          data: y2.value,
          barWidth: 10,
          barGap: 1,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#00da9c',
                },
                {
                  offset: 1,
                  color: '#007a55',
                },
              ]),
              opacity: 1,
            },
          },
        },
      ],
    })
    // 自适应
    window.onresize = function () {
      echarts1.resize()
    }
  })
})
</script>

<style></style>
